import React from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Ruler } from 'lucide-react';

export default function MeasurementDataStep({ data, onUpdate }) {
  const handleChange = (field, value) => {
    onUpdate({ [field]: value });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3 mb-6">
        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
          <Ruler className="w-6 h-6 text-blue-600" />
        </div>
        <div>
          <h2 className="text-xl font-bold text-gray-900">测量数据录入</h2>
          <p className="text-gray-600">输入现场勘测的关键数据</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <Label htmlFor="spanLength">跨越档距 (米) *</Label>
          <Input
            id="spanLength"
            type="number"
            value={data.spanLength}
            onChange={(e) => handleChange('spanLength', e.target.value)}
            placeholder="200"
          />
        </div>
        <div>
          <Label htmlFor="crossingHeight">跨越物高度 (米)</Label>
          <Input
            id="crossingHeight"
            type="number"
            value={data.crossingHeight}
            onChange={(e) => handleChange('crossingHeight', e.target.value)}
            placeholder="5"
          />
        </div>
        <div>
          <Label htmlFor="groundClearance">导线对地距离 (米) *</Label>
          <Input
            id="groundClearance"
            type="number"
            value={data.groundClearance}
            onChange={(e) => handleChange('groundClearance', e.target.value)}
            placeholder="25"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <Label htmlFor="windSpeed">最大风速 (m/s)</Label>
          <Input
            id="windSpeed"
            type="number"
            value={data.windSpeed}
            onChange={(e) => handleChange('windSpeed', e.target.value)}
            placeholder="10"
          />
        </div>
        <div>
          <Label htmlFor="iceThickness">覆冰厚度 (mm)</Label>
          <Input
            id="iceThickness"
            type="number"
            value={data.iceThickness}
            onChange={(e) => handleChange('iceThickness', e.target.value)}
            placeholder="10"
          />
        </div>
        <div>
          <Label htmlFor="temperatureMin">温度范围 (°C)</Label>
          <Input
            id="temperatureMin"
            type="number"
            value={data.temperatureMin}
            onChange={(e) => handleChange('temperatureMin', e.target.value)}
            placeholder="1"
          />
        </div>
        <div>
          <Label htmlFor="temperatureMax">到 (°C)</Label>
          <Input
            id="temperatureMax"
            type="number"
            value={data.temperatureMax}
            onChange={(e) => handleChange('temperatureMax', e.target.value)}
            placeholder="29"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <Label htmlFor="soilCondition">土壤地质条件</Label>
          <Textarea
            id="soilCondition"
            value={data.soilCondition}
            onChange={(e) => handleChange('soilCondition', e.target.value)}
            placeholder="粘土"
            rows={3}
          />
        </div>
        <div>
          <Label htmlFor="terrainDescription">地形地貌描述</Label>
          <Textarea
            id="terrainDescription"
            value={data.terrainDescription}
            onChange={(e) => handleChange('terrainDescription', e.target.value)}
            placeholder="平原"
            rows={3}
          />
        </div>
      </div>
    </div>
  );
}